<template>
    <view class="maxView">
        <uv-input v-bind="attrs" v-model="searchModel" class="searchInput">
            <!-- vue3模式下必须使用v-slot:prefix -->
            <template v-slot:prefix>
                <image
                    :src="searchIcon"
                    mode="scaleToFill"
                    style="width: 20px; height: 20px;"
                />
            </template>
            <template v-slot:suffix>
                <slot name="suffix"></slot>
			</template>
        </uv-input>
    </view>
</template>

<script lang="ts" setup>
    import searchIcon from "@/static/resident/search.png";
    import { computed, useAttrs } from "vue";
    const attrs = useAttrs();
    const emits = defineEmits()
</script>

<style scoped lang="scss">
.maxView {
    display: flex;
}
.searchInput ::v-deep .uv-input__content{
    // padding: 8rpx;
    // border: 2rpx solid #f7fafd;
    border-radius: 48rpx;
} 
.maxView ::v-deep .uv-border {
    border-radius: 14rpx !important;
}
</style>